<template>
   <div class="login-box">
      <div class="log">
         <router-link to="/">
            <div class="log-img">
            </div>
         </router-link>
      </div>
      <div class="register-content">
         <div class="register-img">
            <div class="login-content">
               <div class="box">
                  <h1>MEI登录</h1>
                  <ul>
                     <li>
                        <div class="label">
                           <label for="userName">用户名或邮箱</label>
                        </div>

                           <el-input
                              id="userName"
                              class="input"
                              placeholder="请输入用户名或邮箱"
                              v-model="userNameOrEmail"
                              @focus = "_userfocus"
                              clearable>
                           </el-input>
                        <div class="ifon" v-show="isUserNameOrEmailDisplay">
                           <span>请填写用户名或邮箱</span>
                        </div>
                     </li>
                     <li>
                        <div class="label">
                           <label for="password">密码</label>
                        </div>
                        <el-input
                           id="password"
                           class="input"
                           type="password"
                           placeholder="请输入密码"
                           v-model="password"
                           @focus = "_passwordfocus"
                           clearable>
                        </el-input>
                        <div class="ifon" v-show="isPasswordDisplay">
                           <span>请填写密码</span>
                        </div>
                     </li>
                  </ul>
                  <div class="slider-validates">
                     <validates-box ref="slider" @slider="_slider"></validates-box>
                  </div>
                  <div class="btn">
                     <el-button type="success" :disabled="disabled"
                                @click="_submission"
                     >登录</el-button>
                     <router-link to="/register">
                        <el-button type="primary">注册</el-button>
                     </router-link>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <m-footer></m-footer>
      <modal-frame-box v-if="isCloseModel"
                       @closeModel="_closeModel"
                       :message="ismessage"
                       :successlogin="issuccess"
                       ref="model"
                       @isCloseReturn="_isRerurnHomePage"
                       @isOpenReturn = "_isRerurnHomePageOpen"
      ></modal-frame-box>
   </div>
</template>

<script>
   import MFooter from '../meizu-footer-wrap/meizu-footer-wrap'
   import validatesBox from '../Verifying-slider/Verifying-slider'
   import ModalFrameBox from '../../components/Modal-Frame-Box/Modal-Frame-Box'
   import {mapMutations, mapGetters} from 'vuex'
   export default {
      name: 'login-box',
      data() {
         return {
            userNameOrEmail: '',
            password: '',
            disabled: true,
            isUserNameOrEmailDisplay: false,
            isPasswordDisplay: false,
            isCloseModel: false,
            success: false,
            message: '',
            isRerurnHomePage: false
         }
      },
      computed: {
         lastValidates() {
            return {
               isUserNameOrEmailDisplay: this.userNameOrEmail,
               isPasswordDisplay: this.password
            }
         },
         ismessage() {
            return this.message
         },
         issuccess() {
            return this.success
         },
         ...mapGetters(['loginMessage'])
      },
      methods: {
         _slider() {
            let arr = Object.keys(this.lastValidates)
            arr.forEach((item, index) => {
               if (this.lastValidates[item] === '') {
                  this[item] = true
                  this._resetSlider()
               } else {
                  this[item] = false
               }
            })
            let lean = arr.every((item) => {
               return this.lastValidates[item] !== ''
            })
            if (lean === true) {
               this.disabled = false
            }
         },
         _userfocus() {
            this.isUserNameOrEmailDisplay = false
         },
         _passwordfocus() {
            this.isPasswordDisplay = false
         },
         _resetSlider() {
            this.$refs.slider._initElement()
         },
         async _submission() {
            if (this.userNameOrEmail === '' || this.password === '') {
               return
            }
            let data = await this.$axios.post('/apis/login/login', {
               userName: this.userNameOrEmail,
               password: this.password
            })
            if (data.data.result === 1 && data.status === 200) {
               if (!data.data.success) {
                  this.message = data.data.message
                  this.isCloseModel = true
                  return
               }
               this.isCloseModel = true
               this.success = data.data.success
               this.message = data.data.message
               this.setLoginMessage(data.data)
               window.sessionStorage.setItem('user_id', data.data.user._id)
               let cookie = document.cookie.split(';')[0].split('=')
               this.setCookie({
                  key: cookie[0],
                  value: cookie[1]
               })
            }
         },
         _closeModel() {
            this.userNameOrEmail = ''
            this.password = ''
            this._resetSlider()
            this.isCloseModel = false
         },
         _loginSuccess() {
            this.$refs.model._success()
         },
         _isRerurnHomePage(isclose) {
            this.isRerurnHomePage = isclose
         },
         _isRerurnHomePageOpen(isOpen) {
            this.isRerurnHomePage = isOpen
         },
         ...mapMutations({
            setLoginMessage: 'loginMessage',
            setCookie: 'addCookie',
            setUserCollection: 'userCollection'
         })
      },
      components: {
         MFooter,
         validatesBox,
         ModalFrameBox
      },
      watch: {
         success: {
            handler(newVal, oldVal) {
               this.$nextTick(() => {
                  if (newVal && !this.isRerurnHomePage) {
                     this._loginSuccess()
                     this.success = ''
                  }
               })
            }
         }
      }
   }
</script>

<style scoped lang="stylus">
   .log
      width 100%
      height 68px
      .log-img
         height 68px
         width 1200px
         margin 0 auto
         box-sizing border-box
         padding-top 30px
         &::before
            width 110px
            height 20px
            background url("//www3.res.meizu.com/static/cn/_partial/header/images/logo-new_2ea694e.png") no-repeat
            background-size 110px 20px
            display table
            content ""

   .register-content
      width 100%
      height 750px
      .register-img
         background url("//uc-res.mzres.com/resources/uc/wlogin/member/images/banner.png") no-repeat center
         background-size 100%
         width 100%
         height 750px
         display flex
         justify-content center

   .login-content
      margin 0 auto
      height 500px
      width 1200px
      display flex
      justify-content flex-end
      align-items center
      .box
         background white
         min-height 300px
         width 500px
         padding 20px 30px
         box-sizing border-box
         h1
            font-size 25px
            font-weight bold
            letter-spacing 5px
            text-align center
            margin 10px 0
            color #00C3F5
         ul
            li
               width 100%
               display flex
               align-items center
               margin 15px 0
               justify-content space-between
               flex-wrap wrap
               .ifon
                  width 100%
                  text-align center
               .label
                  color #666666
                  font-size 15px
                  width 25%
                  margin 10px 0
                  text-align lefts
                  margin-right 30px
               .input
                  width 68%
                  box-sizing border-box
      .slider-validates
         margin 20px 0
      .btn
         box-sizing border-box
         padding 0 40px
         display flex
         justify-content space-between
      .ifon
         margin 10px 0
         font-size 14px
         color red
</style>
